/**
 * 全局设计系统变量
 * 分类：色彩 | 间距 | 排版 | 边框 | 动效 | z-index | 媒体查询 | 阴影 | CSS变量
 * 命名规则：语义化 + BEM风格（如 $color-primary, $spacing-md）
 */

// ==================== 1. 色彩系统 ====================
// 主色板（使用Map管理，便于主题切换）
$colors: (
        'primary': #1890ff, // 品牌主色
        'success': #52c41a,
        'warning': #faad14,
        'danger': #ff4d4f,
        'black': #000,
        'white': #fff,
  // 中性色（灰度）
        'gray': (
                '100': #fafafa,
                '200': #f5f5f5,
                '900': #262626,
        )
);

// 语义化颜色别名（推荐使用CSS变量动态切换）
:root {
  //--color-primary: #{map-get($colors, 'primary')};
  //--color-text: #{map-get($colors, 'gray-900')};
  //--color-bg: #{map-get($colors, 'white')};
}

// ==================== 2. 间距系统 ====================
$spacing-base: 4px !default; // 基础单位
$spacing-sizes: (
        'xs': $spacing-base * 1, // 4px
        'sm': $spacing-base * 2, // 8px
        'md': $spacing-base * 4, // 16px
        'lg': $spacing-base * 6, // 24px
);

// ==================== 3. 排版系统 ====================
$font-families: (
        'sans': ('Inter', -apple-system, sans-serif),
        'mono': ('Fira Code', monospace),
);

$font-sizes: (
        'xs': 12px,
        'sm': 14px,
        'md': 16px,
        'lg': 20px,
);

$line-heights: (
        'tight': 1.25,
        'normal': 1.5,
);

// ==================== 4. 边框与圆角 ====================
$border-widths: (
        'thin': 1px,
        'thick': 2px,
);

$border-radius: (
        'sm': 4px,
        'md': 8px,
        'full': 9999px,
);

// ==================== 5. 动效与过渡 ====================
$transition-durations: (
        'fast': 0.15s,
        'normal': 0.3s,
);

$transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

// ==================== 6. 层级管理 ====================
$z-index: (
        'dropdown': 1000,
        'modal': 2000,
        'toast': 3000,
);

// ==================== 7. 响应式断点 ====================
$breakpoints: (
        'sm': 640px,
        'md': 768px,
        'lg': 1024px,
);

// ==================== 8. 阴影系统 ====================
$box-shadows: (
        'sm': 0 1px 2px 0 rgba(0, 0, 0, 0.05),
        'md': 0 4px 6px -1px rgba(0, 0, 0, 0.1),
);

// ==================== 9. 工具函数 ====================
/// 获取颜色值（支持嵌套Map）
/// @param {string} $key - 颜色键名（如 'primary' 或 'gray-100'）
@function color($key, $variant: null) {
  @if $variant {
    @return map-get(map-get($colors, $key), $variant);
  }
  @return map-get($colors, $key);
}

/// 获取间距值
/// @param {string} $size - 间距尺寸（如 'md'）
@function spacing($size) {
  @return map-get($spacing-sizes, $size);
}